<template>
	<view class="container">
		<view class="address_info">
			<view class="form_item">
				<view class="label">收货人</view>
				<view class="item_input">
					<u--input placeholder="请填写收货人" border="none" v-model="formData.conPer" inputAlign="right"
						fontSize="12"
						placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
				</view>
			</view>
			<view class="form_item">
				<view class="label">手机号码</view>
				<view class="item_input">
					<u--input placeholder="请填写手机号码" border="none" v-model="formData.phoneNumber" inputAlign="right"
						fontSize="12"
						placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
				</view>
			</view>
			<view class="form_item">
				<view class="label">所在地区</view>
				<view class="item_input" @click="showAddress = true">
					<view class="form_select">
						<pick-regions :defaultRegion="regionCode" @getRegion="handleGetRegion">
							<view v-if="regionName" style="color: #000;">{{regionName}}</view>
							<view v-else>请选择</view>
						</pick-regions>
					</view>
				</view>
			</view>

			<view class="form_item">
				<view class="label">详细地址</view>
				<view class="item_input">
					<u--input placeholder="请填写详细地址" border="none" v-model="formData.detaAddress" inputAlign="right"
						fontSize="12"
						placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
				</view>
			</view>
		</view>
		<!-- 设为默认 -->
		<view class="default_container">
			<view class="title">设为默认</view>
			<view class="radio">
				<u-checkbox-group v-model="formData.isDefault" @change="defaultChange"
					style="width: 100%;border: 1px solid red;">
					<u-checkbox :name="true" shape="circle"></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>

		<!-- 完成 -->
		<view class="complate" @click="complateHandle">完成</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {
		addAddress,
		updateAddress,
		getAddressInfo
	} from "@/api/address.js"
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				showAddress: false,
				loading: false,
				defaultRegion: ['广东省', '深圳市', '罗湖区'],
				regionCode: "440303",
				regionName: "",
				formData: {
					id: null,
					conPer: "",
					phoneNumber: "",
					province: "",
					city: "",
					disCoun: "",
					detaAddress: "",
					isDefault: [false]
				}
			}
		},
		onLoad(option) {
			this.formData.isDefault = [false]
			console.log("option", option);
			if (option.id) {
				this.formData.id = option.id;
				this.getInfo()
			} else {
				this.formData.id = null;
			}
		},
		methods: {
			// 根据id获取星系信息
			async getInfo() {
				let list = {
					id: Number(this.formData.id)
				}
				const res = await getAddressInfo(list)
				this.formData.id = res.id
				this.formData.conPer = res.conPer
				this.formData.phoneNumber = res.phoneNumber
				this.formData.province = res.province
				this.formData.city = res.city
				this.formData.disCoun = res.disCoun
				this.regionCode = res.disCoun.split(",")[1]
				this.regionName = res.province + "-" + res.city + "-" + res.disCoun.split(",")[0]
				this.formData.detaAddress = res.detaAddress
				this.formData.isDefault[0] = res.isDefault
			},

			// 获取选择的地区
			handleGetRegion(region) {
				this.formData.province = region[0].name;
				this.formData.city = region[1].name;
				this.formData.disCoun = region[2].name + "," + region[2].code;
				this.regionCode = region[2].code;
				this.regionName = region[0].name + "-" + region[1].name + "-" + region[2].name;
			},

			//是否设置为默认
			defaultChange(val) {
				if (val.length > 0) {
					this.formData.isDefault[0] = true
				} else {
					this.formData.isDefault[0] = false
				}
			},

			//完成
			async complateHandle() {
				let arr = Object.values(this.formData)
				for (let i = 0;i < arr.length;i++) {
					if(arr[i] == ""){
						uni.showToast({
							title: '未填写完整',
							icon: 'error',
							duration: 1000,
						})
						return
					}
				}
				if (!this.formData.id) {
					let list = {
						conPer: this.formData.conPer,
						phoneNumber: this.formData.phoneNumber,
						province: this.formData.province,
						city: this.formData.city,
						disCoun: this.formData.disCoun,
						detaAddress: this.formData.detaAddress,
						isDefault: this.formData.isDefault[0]
					}
					const res = await addAddress(list)
					if (res) {
						uni.showToast({
							title: '创建成功',
							icon: 'success',
							duration: 1000,
						})
						setTimeout(() => {
							// 跳转到上一个页面
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					} else {
						uni.showToast({
							title: '创建失败',
							icon: 'none',
							duration: 2000,
						})
					}
				} else {
					let list = {
						id: this.formData.id,
						conPer: this.formData.conPer,
						phoneNumber: this.formData.phoneNumber,
						province: this.formData.province,
						city: this.formData.city,
						disCoun: this.formData.disCoun,
						detaAddress: this.formData.detaAddress,
						isDefault: this.formData.isDefault[0]
					}
					const res = await updateAddress(list)
					if (res) {
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 1000,
						})
						setTimeout(() => {
							// 跳转到上一个页面
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					} else {
						uni.showToast({
							title: '更新失败',
							icon: 'none',
							duration: 2000,
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: rgb(245, 245, 245);
		padding: 34rpx 22rpx 170rpx 22rpx;
		box-sizing: border-box;

		.address_info {
			width: 100%;
			background: rgb(255, 255, 255);
			border-radius: 8rpx;
			margin: 0 auto;

			.form_item {
				height: 94rpx;
				line-height: 94rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;

				.label {
					color: rgb(61, 61, 61);
					font-family: 思源黑体;
					font-size: 28rpx;
					font-weight: 400;
				}

				.item_input {
					width: 80%;

					.form_select {
						color: rgb(167, 167, 167);
						font-family: 思源黑体;
						font-size: 24rpx;
						font-weight: 400;
						text-align: right;
					}
				}
			}
		}

		.default_container {
			width: 100%;
			height: 104rpx;
			line-height: 104rpx;
			padding: 0 20rpx 0 26rpx;
			box-sizing: border-box;
			background: rgb(255, 255, 255);
			border-radius: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			.title {
				color: rgb(61, 61, 61);
				font-family: 思源黑体;
				font-size: 28rpx;
				font-weight: 400;
			}

			.radio {
				width: 50rpx;
			}
		}

		.complate {
			width: 706rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			margin: 0 auto;
			color: rgb(255, 255, 255);
			font-size: 40rpx;
			background: rgb(62, 86, 186);
			border-radius: 54rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 30rpx;
			z-index: 999;
		}
	}
</style>